<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>14. Custom convertor</title>
    <script src="../lib/jquery/dist/jquery.js"></script>
    <script src="../lib/markdown-it/dist/markdown-it.js"></script>
    <script src="../lib/to-mark/dist/to-mark.js"></script>
    <script src="../lib/tui-code-snippet/dist/tui-code-snippet.js"></script>
    <script src="../lib/codemirror/lib/codemirror.js"></script>
    <script src="../lib/highlightjs/highlight.pack.js"></script>
    <script src="../lib/squire-rte/build/squire-raw.js"></script>
    <link rel="stylesheet" href="../lib/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="../lib/highlightjs/styles/github.css">
    <link rel="stylesheet" href="./explain.css">
  </head>
  <body>
    <div class="code-html">
    <script src="../dist/tui-editor-Editor-all.js"></script>
    <link rel="stylesheet" href="../dist/tui-editor.css">
    <link rel="stylesheet" href="../dist/tui-editor-contents.css">

    <div id="editSection"></div>
    </div>
    <script class="code-js">
      var content = [
        '<h1>Raw HTML Custom Convertor</h1>',
        '<p>You can replace to <strong>any</strong> custom convertors like this.</p>'
      ].join('\n');

      function RawHtmlCustomConvertor(em) {
        this.eventManager = em;
      }
      RawHtmlCustomConvertor.prototype.initHtmlSanitizer = function () {};
      RawHtmlCustomConvertor.prototype.getMarkdownitHighlightRenderer = function () {};
      RawHtmlCustomConvertor.prototype.toHTML = function (string) { return string; };
      RawHtmlCustomConvertor.prototype.toHTMLWithCodeHightlight = function (markdown) { return markdown; };
      RawHtmlCustomConvertor.prototype.toMarkdown = function (html, toMarkOptions) { return html; };

      var editor = new tui.Editor({
        el: document.querySelector('#editSection'),
        previewStyle: 'vertical',
        height: '400px',
        initialEditType: 'markdown',
        initialValue: content,
        customConvertor: RawHtmlCustomConvertor
      });
    </script>
  </body>
</html>
